<template>
  <div class="flex flex-col h-full">
    <el-form :inline="true" :model="selectProps" class="demo-form-inline">
      <el-form-item label="姓名：">
        <el-input v-model="selectProps.name" placeholder="请输入姓名" clearable />
      </el-form-item>
      <el-form-item label="身份证号码">
        <el-input v-model="selectProps.cardId" placeholder="请输入身份证号码" clearable />
      </el-form-item>
      <el-form-item label="手机号码：">
        <el-input v-model="selectProps.phone" placeholder="请输入手机号码" clearable />
      </el-form-item>
      <div>
        <el-form-item label="职位：">
          <el-select v-model="selectProps.jobId" style="width: 150px" placeholder="请选择职位" clearable filterable>
            <el-option v-for="(item, key) in jobsData" :label="item.name" :key="key" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门：">
          <el-select v-model="selectProps.deptId" style="width: 150px" placeholder="请选择部门" clearable filterable>
            <el-option v-for="(item, key) in depData" :label="item.name" :key="key" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="性别：">
          <el-select v-model="selectProps.sex" style="width: 150px" placeholder="请选择性别" clearable>
            <el-option label="未知" value="0" />
            <el-option label="男" value="1" />
            <el-option label="女" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSelect">搜索</el-button>
          <el-button type="danger" @click="deleteEmployees">删除</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-table v-loading="isLoading" class="flex-1 " :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" :fixed="true" />
      <el-table-column type="index" label="序号" width="80" :fixed="true" align="center" :index="TableIndexMethod"/>
      <el-table-column prop="name" label="姓名" :fixed="true" width="100" align="center" />
      <el-table-column prop="sex" label="性别" width="80" align="center">
        <template #default="scope">
          <span v-if="scope.row.sex === 1">男</span>
          <span v-if="scope.row.sex === 2">女</span>
          <span v-if="scope.row.sex === 0">未知</span>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="电话号码" width="200" align="center" />
      <el-table-column prop="email" label="邮箱" width="200" align="center" show-overflow-tooltip />
      <el-table-column prop="jobId" label="职位" width="150" align="center" show-overflow-tooltip>
        <template #default="scope">
          <span v-for="(item, key) in jobsData" :key="key">{{ item.id == scope.row.jobId ? item.name : "" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="deptId" label="部门" width="100" align="center">
        <template #default="scope">
          <span v-for="(item, key) in depData" :key="key">{{ item.id == scope.row.deptId ? item.name : "" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="education" label="学历" width="100" align="center" />
      <el-table-column prop="speciality" label="所学专业" width="200" align="center" />
      <el-table-column prop="cardId" label="身份证号码" width="250" align="center" show-overflow-tooltip />
      <el-table-column prop="party" label="政治面貌" width="100" align="center" />
      <el-table-column prop="address" label="联系地址" width="200" align="center" show-overflow-tooltip />
      <el-table-column prop="createDate" label="建档日期" width="200" align="center" />
      <el-table-column label="操作" width="180" align="center" fixed="right">
        <template #default="scope">
          <el-button type="info" size="small" @click="getEmployeeInfo(scope)">编辑</el-button>
          <el-button type="danger" size="small" @click="deleteEmployee([scope.row.id])">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination class="mt-2" v-model:current-page="tableProps.currentPage" v-model:page-size="tableProps.pageSize"
      :page-sizes="[25, 50]" layout="total, sizes, prev, pager, next, jumper" :total="tableProps.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
  <el-dialog v-model="employeeInfoVisible" title="信息修改" width="70%">
    <el-form id="employee-change" ref="formRef" :inline="true" :model="employeeInfo" class="demo-form-inline"
      :rules="rules">
      <el-descriptions :column="3" border>
        <el-descriptions-item label-align="center" label="姓名">
          <el-form-item prop="name">
            <el-input v-model="employeeInfo.name" clearable />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="身份证号码">
          <el-form-item prop="cardId">
            <el-input v-model="employeeInfo.cardId" clearable />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="学历">
          <el-form-item prop="education">
            <el-input v-model="employeeInfo.education" clearable />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="邮箱">
          <el-form-item prop="email" label="">
            <el-input v-model="employeeInfo.email" clearable />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="手机号">
          <el-form-item prop="phone">
            <el-input v-model="employeeInfo.phone" clearable />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="电话">
          <el-form-item prop="tel">
            <el-input v-model="employeeInfo.tel" clearable />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="政治面貌">
          <el-form-item prop="party">
            <el-input v-model="employeeInfo.party" clearable />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="QQ号码">
          <el-form-item prop="qqNum">
            <el-input v-model="employeeInfo.qqNum" clearable />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="联系地址">
          <el-form-item prop="address">
            <el-input v-model="employeeInfo.address" clearable />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="邮政编码">
          <el-form-item prop="postCode">
            <el-input v-model="employeeInfo.postCode" clearable />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="出生日期">
          <el-form-item prop="birthday">
            <el-date-picker v-model="employeeInfo.birthday" type="date" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="民族">
          <el-form-item prop="race">
            <el-input v-model="employeeInfo.race" clearable />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="专业">
          <el-form-item prop="speciality">
            <el-input v-model="employeeInfo.speciality" clearable />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="爱好">
          <el-form-item prop="hobby">
            <el-input v-model="employeeInfo.hobby" clearable />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="备注">
          <el-form-item prop="remark">
            <el-input v-model="employeeInfo.remark" clearable />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="性别">
          <el-form-item>
            <el-select v-model="employeeInfo.sex" style="width: 100px;">
              <el-option label="未知" :value="0" />
              <el-option label="男" :value="1" />
              <el-option label="女" :value="2" />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="职位">
          <el-form-item>
            <el-select v-model="employeeInfo.jobId" style="width: 150px" filterable>
              <el-option v-for="(item, key) in jobsData" :label="item.name" :key="key" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label-align="center" label="部门">
          <el-form-item>
            <el-select v-model="employeeInfo.deptId" style="width: 150px" filterable>
              <el-option v-for="(item, key) in depData" :label="item.name" :key="key" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="employeeInfoVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEmployeeInfoChange(formRef)">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ApiDelete, ApiPost, ApiPut } from '@/utils/Axios';
import { ElMessageBox, ElNotification, type FormInstance } from 'element-plus';
import { onBeforeMount, reactive, ref, watch } from 'vue'
const tableProps = ref({
  currentPage: 1,
  pageSize: 25,
  total: 400,
})
const selectProps = reactive({
  jobId: null,
  name: null,
  cardId: null,
  sex: null,
  phone: null,
  deptId: null
})
const tableData = ref([])
const depData = ref([])
const jobsData = ref([])
const multipleSelection = ref([])
const employeeInfo = ref({
  id: null,
  deptId: "",
  jobId: "",
  name: "",
  cardId: "",
  address: "",
  postCode: "",
  tel: "",
  phone: "",
  qqNum: "",
  email: "",
  sex: "",
  party: "",
  birthday: "",
  race: "",
  education: "",
  speciality: "",
  hobby: "",
  remark: ""
})
const employeeInfoVisible = ref(false)
const formRef = ref<FormInstance>()
const isLoading = ref(false)

onBeforeMount(() => {
  getTableData(tableProps.value.currentPage, tableProps.value.pageSize)
  getDepData()
  getJobsData()
})

watch(tableProps, (newVal, oldVal) => {
  getTableData(newVal.currentPage, newVal.pageSize)
})

const TableIndexMethod = (index: number) => {
    return (tableProps.value.currentPage-1)*tableProps.value.pageSize+index+1
}

const getTableData = (currentPage, pageSize) => {
  isLoading.value = true
  ApiPost("/employeeInf/page", {
    page: Number(currentPage),
    pageSize: Number(pageSize),
    ...selectProps
  }).then(res => {
    console.log(res)
    if (res.code === 200) {
      tableData.value = res.data.records
      tableProps.value.total = res.data.total
    } else {
      console.log("错误=>", res.msg);
    }
    isLoading.value = false
  }).catch(err => {
    console.log("错误=>", err);
  })
}

const getDepData = () => {
  ApiPost("/deptInf/page", {
    page: 1,
    pageSize: 1000,
  }).then(res => {
    console.log(res)
    if (res.code === 200) {
      depData.value = res.data.records
    } else {
      console.log("错误=>", res.msg);
    }
  })
}

const getJobsData = () => {
  ApiPost("/jobInf/page", {
    page: 1,
    pageSize: 1000,
  }).then(res => {
    if (res.code === 200) {
      jobsData.value = res.data.records
    } else {
      console.log("错误=>", res.msg);
    }
  })
}

const onSelect = () => {
  console.log(selectProps)
  tableProps.value.currentPage = 1
  getTableData(tableProps.value.currentPage, tableProps.value.pageSize)
}

const deleteEmployee = (employeeList: number[]) => {
  ElMessageBox({
    title: "警告",
    type: "warning",
    message: "确认删除该员工信息吗？",
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    showCancelButton: true,
  }).then(() => {
    ApiDelete("/employeeInf/delete", { ids: employeeList.join(",") }).then(res => {
      if (res.code === 200) {
        getTableData(tableProps.value.currentPage, tableProps.value.pageSize)
        ElNotification({
          title: "删除成功",
          type: "success",
          showClose: false,
          duration: 2000,
        })
      } else {
        ElNotification({
          title: "删除失败",
          type: "error",
          message: res.msg,
          showClose: false,
          duration: 2000,
        })
      }
    }).catch((err) => {
      console.log("删除失败")
    })
  }).catch(() => {
    return
  })
}

const deleteEmployees = () => {
  if (multipleSelection.value.length === 0) return
  const employeeList = multipleSelection.value.map(item => item.id)
  deleteEmployee(employeeList)
}

const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

const getEmployeeInfo = (scope) => {
  employeeInfo.value = { ...scope.row }
  employeeInfoVisible.value = true
}

const rules = reactive({
  name: [{
    trigger: 'blur', validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('姓名不能为空'))
      } else {
        callback()
      }
    }
  }],
  cardId: [{
    trigger: 'blur', validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('身份证号码不能为空'))
      } else {
        callback()
      }
    }
  }],
  address: [{
    trigger: 'blur', validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('联系地址不能为空'))
      } else {
        callback()
      }
    }
  }],
  postCode: [{
    trigger: 'blur', validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('邮政编码不能为空'))
      } else {
        callback()
      }
    }
  }],
  tel: [{
    trigger: 'blur', validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('电话号码不能为空'))
      } else {
        callback()
      }
    }
  }],
  phone: [{
    trigger: 'blur', validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('手机号码不能为空'))
      } else {
        callback()
      }
    }
  }],
})

const handleEmployeeInfoChange = (formEl: FormInstance | undefined) => {
  formEl.validate(vail => {
    if (vail && employeeInfo.value.id) {
      ElMessageBox({
        title: "提醒",
        type: "warning",
        message: "确认修改员工信息吗？",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showCancelButton: true,
      }).then(() => {
        ApiPut("/employeeInf/update", { ...employeeInfo.value }).then(res => {
          console.log(res)
          if (res.code === 200) {
            employeeInfoVisible.value = false
            getTableData(tableProps.value.currentPage, tableProps.value.pageSize)
            ElNotification({
              title: "修改成功",
              type: "success",
              showClose: false,
              duration: 2000,
            })
          }
        })
      }).catch(() => {
        return
      })
    }
  })

}

const handleSizeChange = (val) => {
  tableProps.value = { ...tableProps.value, pageSize: val };
};
const handleCurrentChange = (val) => {
  tableProps.value = { ...tableProps.value, currentPage: val };
};
</script>

<style scoped>
#employee-change .el-form-item {
  margin: 0 !important;
  width: 100% !important;
}
</style>